<template>
    <div class="bigData">
        <div class="bigData-header">
            <img src="./img/header.png" width="100%"  alt=""/>
            <div class="bigData-header-title">
                {{title}}
                <p>{{time}}</p>
            </div>
        </div>
        <div class="bigData-content">
            <div class="bigData-content-chart">
                <div class="bigData-content-chart-item">
                    <AlarmType/>
                </div>
                <div class="bigData-content-chart-item">
                    <FrequencyPeriod/>
                </div>
                <div class="bigData-content-chart-item">
                    <AgeDistribution/>
                </div>
            </div>
             <Map class="bigData-content-map"/>
            <div class="bigData-content-chart">
                <div class="bigData-content-chart-item">
                    <statistics/>
                </div>
                <div class="bigData-content-chart-item">
                    <AlarmList/>
                </div>
                <div class="bigData-content-chart-item">
                    <WearRate/>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Map from './component/map';
    import AlarmType from "./component/alarmType";
    import FrequencyPeriod from "./component/frequencyPeriod";
    import AgeDistribution from "./component/AgeDistribution";
    import statistics from "./component/statistics";
    import AlarmList from "./component/AlarmList";
    import WearRate from "./component/WearRate";
    function getFormatDate() {
        var date = new Date();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentDate = date.getFullYear() + "-" + month + "-" + strDate
            + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
        return currentDate;
    }
    let times = null;
    export default {
        name: "index",
        components: {
          Map, AlarmType, FrequencyPeriod, AgeDistribution, statistics, AlarmList, WearRate
        },
        data() {
            return{
                title: '智慧终端管理平台',
                time: '0'
            }
        },
        created() {
          this.time = this.formatDate(getFormatDate());
            times = setInterval(() => {
              this.time = this.formatDate(getFormatDate());
          }, 1000)
        },
        destroyed() {
            clearInterval(times);
            times = null;
        },
        methods: {
            //inputTime 参数是毫秒级时间戳
            formatDate(inputTime) {
                var date = new Date(inputTime);
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                m = m < 10 ? ('0' + m) : m;
                var d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                var h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                var minute = date.getMinutes();
                var second = date.getSeconds();
                minute = minute < 10 ? ('0' + minute) : minute;
                second = second < 10 ? ('0' + second) : second;
                return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
            },
        }
    }
</script>

<style scoped lang="less">
.bigData{
    height: 100%;
    width: 100%;
    background:#000 url("./img/bg.png") no-repeat center;
    background-size: cover;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    &-header{
        position: relative;
        &-title {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            color: #fff;
            width: 50%;
            text-align: center;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            font-size: 35px;
            p{
                font-size: 14px;
                margin: 0;
                padding:  0;
                color: rgba(255, 255, 255, 0.6);
            }
        }
    }
    &-content{
        flex: 1;
        display: flex;
        position: relative;
        &-map{
            flex: 1;
            height: 100%;
        }
        &-chart{
            flex: .4;
            height: 100%;
            display: flex;
            flex-direction: column;
            position: relative;
            z-index: 8;
            &-item{
                height: 33%;
                &::-webkit-scrollbar {
                    display: none; /* Chrome Safari */
                }
            }
        }
    }
}
@media screen and (max-width: 1000px) {
    .bigData{
        &-header{
            &-title {
                font-size: 25px;
                p{
                    font-size: 12px;
                }
            }
        }
    }
}
@media screen and (max-width: 700px) {
    .bigData{
        &-header{
            &-title {
                font-size: 30px;
                transform: translateY(0px) scale(.5);
                p{
                    font-size: 12px;
                }
            }
        }
    }
}
@media screen and (max-width: 400px) {

    .bigData{
        &-header{
            &-title {
                font-size: 20px;
                transform: translateY(0px) scale(.5);
                p{
                    font-size: 12px;
                }
            }
        }
    }
}
</style>
